<template>
<div class="home-main">
    <el-card class="card">
        <div slot="header" class="header">首页</div>
        <!-- 图表内容区 -->
        <div>
            <div class="echarts-header">
                <el-row :gutter="10">
                    <el-col :span="6">
                        <el-card>
                            <div slot="header">
                                <strong>用户数量:</strong>:<span> {{echarts.memberCount}}</span>
                            </div>
                            <div>
                                <strong>订单数量:</strong>:<span> {{echarts.orderCount}}</span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div slot="header">
                                <strong>退单数量:</strong>:<span> {{echarts.orderReturnCount}}</span>
                            </div>
                            <div>
                                <strong>今日退单:</strong>:<span> {{echarts.orderReturnTodayCount}}</span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div slot="header">
                                <strong>今日订单:</strong>:<span> {{echarts.orderTodayCount}}</span>
                            </div>
                            <div>
                                <strong>商品数量:</strong>:<span> {{echarts.productCount}}</span>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card>
                            <div slot="header">
                                <strong>商品新增:</strong>:<span> {{echarts.productTodayCount}}</span>
                            </div>

                            <div>
                                <strong>用户新增:</strong>:<span> {{echarts.userTodayCount}}</span>
                            </div>
                        </el-card>
                    </el-col>

                </el-row>
            </div>
            <el-card class="echarts">
                <div>
                    <!-- 图表集合 -->
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <div id="echartsOrderList" class="orderList"></div>
                        </el-col>
                        <el-col :span="12">
                            <div id="echartsOrderBackList" class="orderBackList"></div>
                        </el-col>
                    </el-row>
                </div>
            </el-card>

        </div>

    </el-card>
</div>
</template>

<script>
import {
    baseData as baseDataApi
} from '@/api/home/index.js'
var echarts = require('echarts');
export default {
    components: {

    },
    data() {
        return {
            // 订单列表
            orderBydayList: [],
            // 退单列表
            orderReturnBydayList: [],
            echarts: {}
        };
    },
    computed: {

    },
    created() {
        this.init()
        // 操作DOM元素
        this.$nextTick(res => {

            this.myChart1 = echarts.init(document.getElementById('echartsOrderList'));
            this.myChart2 = echarts.init(document.getElementById('echartsOrderBackList'));

        })

    },
    mounted() {
        // DOM元素渲染完毕可以在此钩子函数中操作DOM元素了实例echarts表格可以
        // 基于准备好的dom，初始化echarts实例

    },
    methods: {
        init() {
            baseDataApi().then(res => {
                console.log(res);
                this.echarts = res.data
                // date count
                this.orderBydayList = res.data.orderBydayList
                this.orderReturnBydayList = res.data.orderReturnBydayList

                // 最后赋值完成后调用
                this.initOrdeListEcharts()
                this.initOrderBackListEcharts()
            })
        },

        // 初始化退单列表
        initOrdeListEcharts() {

            var xData = []
            var yData = []

            this.orderBydayList.forEach(el => {
                xData.push(el.date)
                yData.push(el.count)

            })
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '订单列表'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: yData
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            this.myChart1.setOption(option);
        },
        initOrderBackListEcharts() {
            var xData = []
            var yData = []

            this.orderReturnBydayList.forEach(el => {
                xData.push(el.date)
                yData.push(el.count)

            })

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '退单列表'
                },
                tooltip: {},
                legend: {
                    data: ['数量']
                },
                xAxis: {
                    data: xData
                },
                yAxis: {},
                series: [{
                    name: '数量',
                    type: 'bar',
                    data: yData,
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            this.myChart2.setOption(option);

        }

    },
};
</script>

<style lang="scss" scoped>
.card {
    margin: 10px;

    .echarts-header {
        text-align: center;

        span {
            color: #26A65B;
        }
    }

    .echarts {
        margin-top: 70px;
    }

    .header {
        font-weight: bolder;
        font-size: 30px;
        color: #26A65B;
    }

    .orderList {
        width: 600px;
        height: 400px;
    }

    .orderBackList {
        width: 600px;
        height: 400px;
    }
}
</style>
